<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>友金所-选择支付方式</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.0, user-scalable=no">
<link href="../../resources/css/pay.css" rel="stylesheet">
<style>	
	.select-form {
	    padding: 0 10px;
	}
	
	.way-item {
	    border-bottom: 1px solid #ebebeb;
	    padding: 50px 0 40px 200px;
	}
	.radio-ctn {
	    position: absolute;

	    margin-left: -42px;
	    width: 26px;
	    height: 26px;

	    background-image: url("../../resources/images/radio.png");

	    cursor: pointer;
	}
	.radio-ctn.on {
	    background-position: 0 26px;
	}
	.way-radio {
	    width: 26px;
	    height: 26px;
		visibility:hidden;
	}
	
	.type-title {
	    font-size: 24px;

	    color: #333;

	    cursor: pointer;
	}
	
	.type-tip {
	    display: inline;

	    padding-left: 30px;

	    font-size: 14px;

	    color: #666;
	}
	.limitTable_Btn {
	    color: #ff2830;

	    cursor: pointer;
	}
	.way-bankinfo {
	    margin-top: 20px;
	}
	
	i.way-banklogo {
	    float: left;

	    margin-top: -14px;
	}
	
	.way-bankcard {
	    padding-right: 16px;
	    padding-left: 10px;

	    font-size: 16px;

	    color: #000;
	}
	
	.way-banklimit {
	    border-left: 1px solid #666;
	    padding-left: 20px;

	    color: #666;
	}
	.mobile-site .select-form{
		padding-top: 50px;
	}
	.mobile-site .way-item{
		display: none;
	}
</style>
</head>
<body>
	
	<div class="pc-header">
		<!-- logo导航栏-->
		<div class="header_nav">
			<div class="header_nav-ctn">
				<div class="logo">
					<img class="logo-img" src="../../resources/images/yyfax-logo.png">
					<span class="logo-text">选择支付方式</span>
				</div>
			</div>
		</div>
		<!-- logo导航栏-->
	</div>
	<div class="yy-navbar ng-scope">
		<div class="navbar-row">
			<div class="navbar-left">
				<a class="btn-back">
					<i class="arrow_border_icon arrow_left"></i><span>返回</span>
				</a>
			</div>
			<div class="navbar-title navbar-center" style>
				<span class="ng-binding" ng-bind="pageTitle">支付方式</span>
			</div>
			<div class="navbar-right">
				<a class="support-bank" ui-sref="suppotBankList" rel="支持银行">支持银行</a>
			</div>
		</div>
	</div>
	<div class="contain-main">
		<form class="select-form" id="form1" action="#">
			<input name="payOrderId" type="hidden" value="${payOrderId}">
			<input name="merchantCode" type="hidden" value="${merchantCode}">
			<input type="hidden" name="idNo" value="${idNo}" />
			<input type="hidden" name="name" value="${name}" />
			<input type="hidden" name="cardNo" value="${cardNo}" />
			<input name="sign" type="hidden" value="${sign}">
			<div class="way-item">
				<span class="radio-ctn on auth"><input class="way-radio" id="authcheck" name="payMode" type="radio" value="1" checked="checked"></span>
				<label class="type-title" for="authcheck">认证支付</label>
				<div class="type-tip">认证支付，快捷方便&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="limitTable_Btn" href="javascript:void(0);">查看支持银行>></a></div>
				
				<#if bankEnName??>
				<div class="way-bankinfo">
					<i class="way-banklogo ${bankEnName!} bankIcon " id="order-icon"></i>
					<span class="way-bankcard" id="order-bankName">${bankName!}(尾号${tailCardNo!})</span>
					<span class="way-banklimit">单笔限额<span id="oncelimit">${singleQuota!}</span>，单日限额<span id="daylimit">${dayQuota!}</span>，单月限额<span id="monthlimit">${monthQuota!}</span></span>
					
					<span style="display:block;color: #666;line-height: 40px;">${remark!}</span>
				</div>
				</#if>
			</div>
			<div class="way-item">
				<span class="radio-ctn bank"><input class="way-radio" id="bankcheck" name="payMode" type="radio" value="2"></span>
				<label class="type-title" for="bankcheck">网银支付</label>
				<div class="type-tip">网银支付，额度更高</div>
			</div>
			<div>
				<input class="sub-btn" id="sub" type="button" value="使用认证支付">
			</div>
		</form>
	</div>

	<div style="display: none;">
		<form id="form2" method="post"></form>
	</div>
	
	<div class="cover-wrap limitTable-dialog" style="display: none;">
		<div class="content-box borders deposit limitTable">
			<span class="closeBtn"></span>
			<p>支持银行</p>
			<ul class="limitBankList" id="pcLimitTable">                    
				<li class="bankItem">
					<i class="bankIcon ABC"></i>
					<span class="bankName">农业银行</span>
					<span class="bankLimit">单笔限额5万，单日限额10万，单月限额200万</span>
				</li>
				
				<li class="bankItem">
					<i class="bankIcon ICBC"></i>
					<span class="bankName">工商银行</span>
					<span class="bankLimit">单笔限额5万，单日限额5万，单月限额150万</span>
				</li>
			</ul>
			<p class="closeBtn knewBtn">我知道了</p>
		</div>
	</div>	
	<div class="h5-limitTable" style="display:none;">
		<ul class="limitBankList" id="mobileLimitTable">
			<li class="mobile-bankItem">
				<i class="bankIcon ABC"></i>
				<span class="bankName ng-binding">农业银行</span>
				<span class="bankLimit ng-binding">限额 单笔5万，单日10万，单月200万</span>
			</li>		
			<li class="mobile-bankItem">
				<i class="bankIcon ICBC"></i>
				<span class="bankName ng-binding">工商银行</span>
				<span class="bankLimit ng-binding">限额 单笔5万，单日5万，单月150万</span>
			</li>
		</ul>
	</div>
	<script src="../../resources/js/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
	<script src="../../resources/js/common.js" type="text/javascript"></script>
	
	<script type="text/javascript">
	$(function() {
		
		
		
		$.ajax({
			type:'post',
			dataType: 'Json',
			url:'${ctx}/common/api/bank_quota/query_list',
			data:{
				merchantCode:$('input[name="merchantCode"]').val()
			}
		}).then(function(data){
			if(data.code===0){
				var ctn = data.content;
				var limitH5='';
				var limitPC='';
				for(var i=0;i<ctn.list.length;i++){
					var item = ctn.list[i];
					var singleQuota = item.singleQuota=='null'?'无限额':((item.singleQuota/1000000).toFixed(0)+'万');
					var dayQuota = item.dayQuota=='null'?'无限额':((item.dayQuota/1000000).toFixed(0)+'万');
					var monthQuota =item.monthQuota=='null'?'无限额':((item.monthQuota/1000000).toFixed(0)+'万');
					limitH5+='<li class="bankItem"><i class="bankIcon '+item.enName.toUpperCase()+'"></i><span class="bankName">'+item.bankName+'</span>'+
					'<span class="bankLimit">单笔限额'+singleQuota+'，单日限额'+dayQuota+'，单月限额'+monthQuota+'</span></li>';
					limitPC+='<li class="mobile-bankItem"><i class="bankIcon '+item.enName.toUpperCase()+'"></i><span class="bankName">'+item.bankName+'</span>'+
					'<span class="bankLimit">限额 单笔'+singleQuota+'，单日'+dayQuota+'，单月'+monthQuota+'</span></li>';
				}
				$('#pcLimitTable').html(limitH5);
				$('#moblileLimitTable').html(limitPC);
			}else{
				// util.showErrMsg('网络异常,请稍后重试'||data.display);
				console.log('获取限额表失败')
			}
		},function(){
		})

		$('.limitTable_Btn').click(function(){
			var height = 575;
			if($(window).height()<800){
				height=320
			}
			$('.limitTable-dialog').find('.limitBankList').height(height).end().show();
		});
		$('.radio-ctn').click(function(){
			$(this).next('.type-title').click();
		})
		$('[name="payMode"]').change(function(){
			if(this.value==='1'){
				$('.bank').removeClass('on');
				$('.auth').addClass('on');
				$('#sub').val('使用认证支付');
			}else{
				$('.auth').removeClass('on');
				$('.bank').addClass('on');;
				$('#sub').val('使用网银支付');
			}
		})
		$('.knewBtn').click(function(){
			$('.limitTable-dialog').hide();
		});
		$('.support-bank').click(function(){
			$('.h5-limitTable').show();
		});
		$('.btn-back').click(function(){
			event.preventDefault();
			if($('.h5-limitTable').css('display')==='block'){
				$('.h5-limitTable').hide();
				return false;
			}else{
				history.go(-1);
			}
		});
		$('#sub').click(function() {
			if($(this).hasClass('busy')){
				return;
			}
			$(this).addClass('busy');

			$.ajax({
				url : "${ctx}/api/pay/select/confirm",
				data : $("#form1").serialize(),
				type : "post",
				dataType: 'Json',
				success : function(data) {//ajax返回的数据
				
					if(data.code == 0){
						$("#form2").attr("action",data.content.url)
						//解析返回参数
						$.each(data.content.form,function(name,value){
							 var input ="<input type='hidden' name='"+name+"' value='"+value+"' >"; 
							 $("#form2").append(input);
						});
					
						$("#form2").submit();
					}else{
						util.showErrMsg(data.display);
					}
					$('#sub').removeClass('busy');
				},
				error: function() {
					util.showErrMsg('网络异常，请稍后重试');
					$('#sub').removeClass('busy');
				}
			}).always(function(){
				$('#sub').removeClass('busy');
			});
		});

	});
</script>
</body>

</html>